<template>
	<navbar titleText="搜索"/>
	
	<up-search 
		placeholder="搜索" 
		height="64rpx"
		margin="10rpx 20rpx"
		v-model="search_data"
		@custom="toSearch"
		@search="toSearch"
	></up-search>
	
	<view class="tab">
		<view :class="current ===0 ?'tab-text-select' :'tab-text'" @click="tabChange(0)">
			<view>大家在搜</view>
			<view v-if="current ===0" class="line"></view>
		</view>
		<view :class="current ===1 ?'tab-text-select' :'tab-text'" @click="tabChange(1)">
				<view>本周热搜</view>
				<view v-if="current ===1" class="line"></view>
		</view>
	</view>
	
	<swiper
		:current="current"
		@change="sildechange"
	>
		<swiper-item>
			<view class="swiper-item">
				<view class="text" @click="togo">押尾光太郎</view>
				<view class="text">松井佑贵</view>
				<view class="text">井草圣二</view>
				<view class="text">伍伍慧</view>
				<view class="text">岸部真明</view>
				<view class="text">中川砂仁</view>
				<view class="text">郑成河</view>
				<view class="text">陈亮</view>
			</view>
		</swiper-item>
		<swiper-item class="swiper-item">
			<view class="text">you are the hero</view>
			<view class="text">you and me</view>
			<view class="text">花火</view>
			<view class="text">等待的风</view>
			<view class="text">流行的云</view>
			<view class="text">distance</view>
			<view class="text">flaming</view>
			<view class="text">无题</view>
		</swiper-item>
	</swiper>
</template>

<script setup>
	import { ref, toRaw } from 'vue'; 
	const current = ref(0); 
	const search_data = ref();
	const tabChange =(index)=>{
		current.value =index;
	}
	const sildechange =(e)=>{   //切换栏
		current.value =e.detail.current;
	}
	
	const toSearch = ()=>{
		uni.navigateTo({
			url:'/pages/list/index?totext='+ search_data.value
			
		})
	}
	
	const togo =()=>{
		uni.navigateTo({
			url:'/pages/list/index?totext='+ '押尾光太郎'
			
		})
	}
</script>

<style>
	.tab{
		height: 70rpx;
		width: 100%;
		display: flex;
	}
	.tab-text{
		margin-left:40rpx;
		margin-top: 10rpx;
		font-size: 34rpx;
		color: #666666;
	}
	.tab-text-select{
		margin-left:40rpx;
		margin-top: 10rpx;
		font-size: 42rpx;
		color: #333333;
	}
	.line{
		height: 6rpx;
		width:60rpx ;
		background-color:#428687;
		margin:4rpx 50rpx;
	}
	.swiper-item{
		width: 650rpx;
		height: 260rpx;
		margin: 10rpx 0rpx 10rpx 40rpx;
		padding-left: 20rpx;
		display:grid;
		grid-template-columns:50% 50% ;
	}
	.text{
		margin-top: 20rpx;
	}
</style>
